<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>输血管理系统</title>
    <link rel="shortcut icon" type="image/x-icon" href="/img/favicon.ico">
    <link rel="stylesheet" href="/element-theme/blue/index.css">
</head>

<body>
    <div class="data-manage-table">
        <template>
            <!--血液样本查询-->
            <el-form ref="form" :inline="true" style="padding:20px 20px 0 20px;">
                <!-- <el-button type="primary" style="margin-right: 40px;">批量删除</el-button> -->
                <el-form-item label="样本编号">
                    <el-input placeholder="请输入样品编号" v-model="searchSampleToConfirm.number"></el-input>
                </el-form-item>
                <el-form-item label="血液编号">
                    <el-input placeholder="请输入血液编号" v-model="searchSampleToConfirm.bloodNumber"></el-input>
                </el-form-item>
                <el-form-item label="状态">
                    <el-select v-model="searchSampleToConfirm.state">
                        <el-option v-for="item in state" :key="item.code" :label="item.name" :value="item.code">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="操作人">
                    <el-input placeholder="请输入操作人姓名" v-model="searchSampleToConfirm.operator"></el-input>
                </el-form-item>
                <el-form-item label="采集日期">
                    <el-date-picker v-model="searchSampleToConfirm.dateVal" type="daterange" size="small" format="yyyy-MM-dd"
                                    range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="clickSearch">搜索</el-button>
                    <el-button type="info" @click="emptySearch">重置</el-button>
                    <el-button type="" @click="dialogVisible = true">登记</el-button>
                    <el-button type="" @click="exportExcel()">导出</el-button>
                </el-form-item>
            </el-form>
    
            <!-- 新增样本-->
            <el-dialog title="添加样本" center :visible.sync="dialogVisible" width="400px" @close="cancel">
                <!-- 内容的主体区域 -->
                <el-form ref="form" :model="addForm" :rules="addFormRules" label-width="110px">
                    <el-form-item label="血液样本编号" prop="number">
                        <el-input v-model="addForm.number" style="width: 220px;"></el-input>
                    </el-form-item>
                    <el-form-item label="血液编号" prop="bloodNumber">
                        <el-input v-model="addForm.bloodNumber" style="width: 220px;"></el-input>
                    </el-form-item>
                    <el-form-item label="样本状态" prop="state">
                        <el-select v-model="addForm.state" style="width: 220px;">
                            <el-option v-for="item in state" :key="item.code" :label="item.name"
                                       :value="item.code">
                            </el-option>
                        </el-select>
                    </el-form-item>
<!--                    <el-form-item label="样本位置" prop="location">-->
<!--                        <el-select v-model="addForm.location" style="width: 220px;">-->
<!--                            <el-option v-for="item in location" :key="item.code" :label="item.location"-->
<!--                                       :value="item.code">-->
<!--                            </el-option>-->
<!--                        </el-select>-->
<!--                    </el-form-item>-->
                    <el-form-item label="样本位置" prop="location">
                        <el-input v-model="addForm.location" style="width: 220px;"></el-input>
                    </el-form-item>
                    <el-form-item label="操作人" prop="operator">
                        <el-input v-model="addForm.operator" style="width: 220px;"></el-input>
                    </el-form-item>
                    <el-form-item label="操作人工号" prop="operatorNumber">
                        <el-input v-model="addForm.operatorNumber" style="width: 220px;"></el-input>
                    </el-form-item>
                </el-form>
                <!-- 底部区域 -->
                <span slot="footer" class="dialog-footer">
                        <el-button @click="cancel">取 消</el-button>
                        <el-button type="primary" @click="addSample()">确 定</el-button>
                    </span>
            </el-dialog>
    
            <!-- 签收样本-->
            <el-dialog title="签收样本" center :visible.sync="signVisible" width="300px" @close="cancel">
                <!-- 内容的主体区域 -->
                <el-form ref="form" :model="receiveForm" :rules="signFormRules" label-width="auto" style="display: flex; justify-content: center; align-content: center; flex-direction:column;">
                    <el-form-item label="样本编号" prop="number" >
                        <el-input v-model="receiveForm.number" readonly  style="width:180px; float: right;"></el-input>
                    </el-form-item>
                    <el-form-item label="样本位置" prop="location">
                        <el-select v-model="receiveForm.location" style="width: 180px; float: right;">
                            <el-option v-for="item in location" :key="item.value" :label="item.label"
                                       :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
                <!-- 底部区域 -->
                <span slot="footer" class="dialog-footer">
                        <el-button @click="cancelReceive">取 消</el-button>
                        <el-button type="primary" @click="confirmReceive">确 定</el-button>
                    </span>
            </el-dialog>
    
            <!--血液样本展示-->
            <el-table :data="sampleInformation" style="width: 100%" border
                      :header-cell-style="{'text-align': 'center','background': '#eef1f6'}" highlight-current-row
                      @current-change="" id="out-table">
                <el-table-column type="selection" width="55" align="center"></el-table-column>
    
                <el-table-column prop="number" label="血液样本编号" min-width="10%" align="center">
                </el-table-column>
    
                <el-table-column prop="bloodNumber" label="血液编号" min-width="10%" align="center">
                </el-table-column>
    
                <el-table-column label="采集日期" min-width="15%" align="center">
                    <template slot-scope="scope">
                        <i class="el-icon-time"></i>
                        <span style="margin-left: 10px">{{scope.row.collectTime}}</span>
                    </template>
                </el-table-column>
    
                <el-table-column prop="stateInfo" label="状态" min-width="10%" align="center">
                </el-table-column>
    
                <el-table-column prop="location" label="样本位置" min-width="15%" align="center">
                </el-table-column>
    
                <el-table-column prop="operator" label="操作人" min-width="10%" align="center">
                </el-table-column>
    
                <el-table-column prop="operatorNumber" label="操作人工号" min-width="10%" align="center">
                </el-table-column>
    
                <el-table-column label="操作" min-width="15%" align="right" fixed="right">
                    <template slot-scope="scope" aligh="center">
                        <el-button size="mini" type="primary" @click="receiveSample(scope.$index, scope.row)" :disabled="scope.row.stateInfo!='出库'">签收</el-button>
                        <el-button size="mini" type="primary" @click="outSample(scope.$index, scope.row)" :disabled="scope.row.stateInfo!='在库'">出库
                        </el-button>
                        <el-button size="mini" type="primary" @click="discardSample(scope.$index, scope.row)" :disabled="scope.row.state=='废弃'">遗弃
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
    
            <!--            <el-pagination :page-size="pageSize" :total="total" :current-page.sync="current" layout="prev, pager, next, jumper"-->
            <!--                class="pagination"  @current-change="handleCurrentChange" style="text-align: center; margin-top: 20px;" />-->
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page.sync="current"
                    :page-sizes="[1, 5, 10, 20]"
                    :page-size.sync="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
                    class="pagination"
                    style="text-align: center; margin-top: 20px;">
            </el-pagination>
        </template>
    </div>

    <script src="/plugins/vue-2.5.17/vue.js"></script>
    <script src="/plugins/element-2.4.5/index.js"></script>
    <script src="/icons/iconfont.js"></script>
    <script src="/js/axios.min.js"></script>
    <script>Vue.prototype.$ELEMENT = { size: 'medium' };</script>
    <script language="JavaScript" type="text/javascript">
        //Date原型上添加格式转换方法
        Date.prototype.format = function(fmt) {
            const o = {
                "M+": this.getMonth() + 1,                 //月份 
                "d+": this.getDate(),                    //日 
                "h+": this.getHours(),                   //小时 
                "m+": this.getMinutes(),                 //分 
                "s+": this.getSeconds(),                 //秒 
                "q+": Math.floor((this.getMonth() + 3) / 3), //季度 
                "S": this.getMilliseconds()             //毫秒 
            };
            if(/(y+)/.test(fmt)) {
                fmt=fmt.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length));
            }
            for(const k in o) {
                if(new RegExp("("+ k +")").test(fmt)){
                    fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));
                }
            }
            return fmt;
        }
    </script>
    <script>
        (function () {
            const vm = window.vm = new Vue({
                el: '.data-manage-table',
                data() {
                    return {
                        total: 0,   //总记录数
                        current: 1,     //当前页
                        pageSize: 5,      //每页记录数
                        pages: 0,       //总页数
                        signVisible: false,  //签收样本弹出框
                        dialogVisible: false,  //新增样本弹出框
                        // searchMode: false,  //false为没有查询条件，true为有查询条件
                        currentChanged: false,  //查询模式是否变化

                        user: {
                            "username": "",
                            "jobnum": "",
                        },

                        //样本状态选择
                        state: [],

                        //样本位置
                        location: [
                            
                        ],

                        //输入查询条件时保存
                        searchSampleToConfirm: {
                            number: '',  //血液样本编号
                            bloodNumber: '',    //血液编号
                            state: '',  //状态
                            operator: '',   //操作员
                            dateVal: '',    //日期范围
                        },

                        //搜索样本信息：点击搜索按钮时带入
                        searchSampleInformation: {
                            number: '',  //血液样本编号
                            bloodNumber: '',    //血液编号
                            state: '',  //状态
                            operator: '',   //操作员
                            dateVal: '',    //日期范围
                        },

                        //查询到的样本信息
                        sampleInformation: [],

                        //新增样本信息
                        addForm: {
                            number: '',
                            bloodNumber: '',
                            state: '',
                            location: '',
                            operator: '',
                            operatorNumber: ''
                        },

                        //签收样本信息
                        receiveForm: {

                        },

                        //新增样本表单验证
                        addFormRules: {
                            number: [{required: true, message: '请输入血液编号', trigger: 'blur'}],
                            bloodNumber: [{required: true, message: '请输入血液编号', trigger: 'blur'}],
                            state: [{required: true, message: '请选择样本状态', trigger: 'blur'}],
                            location: [{required: true, message: '请选择样本位置', trigger: 'blur'}],
                            operator: [{required: true, message: '请输入操作人', trigger: 'blur'}],
                            operatorNumber: [{required: true, message: '请输入操作人工号', trigger: 'blur'}]
                        },

                        //签收样本表单验证
                        signFormRules: {}
                    }
                },

                computed: {
                },

                watch: {
                    // pageSize(newValue, oldValue) {
                    //     console.log(newValue)
                    //     this.searchSampleInformation()
                    // }
                },

                methods: {
                    //获取全部状态信息
                    getBloodSampleState(){
                        axios({
                            url: '/bloodSampleState/normal/query',
                            method: 'get',
                            params: {
                            },
                        }).then(res => {
                            if (res.status == '200') {
                                this.state = res.data
                            } else {
                                this.$notify({
                                    tile: '警告',
                                    message: '搜索出错',
                                    type: 'warning'
                                })
                            }
                        }).catch(err => {
                            this.$notify.error({
                                title: '错误',
                                message: '搜索失败',
                            })
                        })
                    },

                    //获取位置信息
                    getLocation: function(val) {
                        //获取血液位置
                        axios({
                            url: '/bloodLocation/normal/query',
                            method: 'get',
                            params: {},
                        }).then(res => {
                            if (res.status == 200) {
                                this.location = res.data
                            }
                        }).catch(err => {

                        })
                    },

                    handleSizeChange(val) {
                        this.current = 1
                        this.pageSize = val
                        this.searchSample()
                    },

                    //分页查询，显示在table中
                    fetchPageData(current, limit) {
                        axios({
                            method: "get",
                            url: "/bloodSample/normal/listByPage",
                            params: {
                                currentPage: this.current,
                                pageSize: this.pageSize
                            }
                        }).then(res => {
                            if (res.status == '200') {
                                this.sampleInformation = res.data.data;  //更新数据
                                this.total = res.data.total;
                                this.pages = res.data.pages;
                            } else {
                                this.total = res.data.total;
                                this.pages = res.data.pages;
                                this.$notify({
                                    tile: '警告',
                                    message: '获取分页服务内部错误',
                                    type: 'warning'
                                })
                            }
                        }).catch(err => {
                            this.$notify.error({
                                title: '错误',
                                message: '获取分页数据失败',
                            })
                        })
                    },

                    //点击页码
                    handleCurrentChange: function (val) {
                        this.searchSample()
                    },

                    //点击搜索按钮
                    clickSearch(){
                        this.current = 1
                        let dateVal = this.searchSampleToConfirm.dateVal
                        for (let i = 0; i < dateVal.length; i++) {
                            if(dateVal[i] instanceof Date)
                                this.searchSampleToConfirm.dateVal[i] = dateVal[i].format("yyyy-MM-dd")
                        }
                        this.searchSampleInformation = JSON.parse(JSON.stringify(this.searchSampleToConfirm))
                        this.searchSample()
                    },

                    //根据查询条件查询血液样本
                    searchSample() {
                        //血样样本ID
                        let number = this.searchSampleInformation.number
                        //血液编号
                        let bloodNumber = this.searchSampleInformation.bloodNumber
                        //样本状态
                        let state = this.searchSampleInformation.state
                        //操作员
                        let operator = this.searchSampleInformation.operator
                        //日期范围
                        let dateVal = this.searchSampleInformation.dateVal
                        let startTime = dateVal[0]
                        let endTime = dateVal[1]
                        if (this.currentChanged) {
                            this.current = 1
                            this.currentChanged = false
                        }
                        axios({
                            url: '/bloodSample/normal/searchSample',
                            method: 'get',
                            params: {
                                number: number,
                                bloodNumber: bloodNumber,
                                state: state,
                                operator: operator,
                                startTime: startTime != null ? startTime : '',
                                endTime: endTime != null ? endTime : '',
                                currentPage: this.current,
                                pageSize: this.pageSize
                            },
                        }).then(res => {
                            if (res.status == '200') {
                                this.sampleInformation = res.data.data;
                                this.total = res.data.total;
                                this.pages = res.data.pages;
                            } else {
                                this.$notify({
                                    tile: '警告',
                                    message: '搜索出错',
                                    type: 'warning'
                                })
                            }
                        }).catch(err => {
                            this.$notify.error({
                                title: '错误',
                                message: '搜索失败',
                            })
                        })

                    },

                    //清空搜索条件
                    emptySearch() {
                        for (const key in this.searchSampleInformation)
                            this.searchSampleInformation[key] = ""
                        for (const key in this.searchSampleToConfirm)
                            this.searchSampleToConfirm[key] = ""
                    },

                    //添加样本信息
                    addSample() {
                        let newSample = this.addForm
                        if(this.verifyAddSample(newSample)){
                            axios({
                                url: '/bloodSample/normal/addSample',
                                method: 'post',
                                data: newSample
                            }).then(res => {
                                if (res.data.code == '200') {
                                    console.log('插入成功')
                                    this.cancel()
                                    this.$notify({
                                        tile: '成功',
                                        message: '登记成功',
                                        type: 'success'
                                    })
                                    this.fetchPageData(this.current, this.limit)
                                } else {
                                    this.$notify({
                                        tile: '警告',
                                        message: '更新出错',
                                        type: 'warning'
                                    })
                                }
                            }).catch(err => {
                                this.$notify.error({
                                    title: '错误',
                                    message: '更新失败',
                                })
                            })
                        }
                        else {
                            alert('样本信息错误')
                        }
                    },

                    //新增样本信息检查
                    verifyAddSample(newSample){
                        if (newSample.bloodNumber == '' || newSample.bloodNumber == null)
                            return false
                        if (newSample.state == '' || newSample.state == null)
                            return false
                        if (newSample.location == '' || newSample.location == null)
                            return false
                        if (newSample.operator == '' || newSample.operator == null)
                            return false
                        if (newSample.operatorNumber == '' || newSample.operatorNumber == null)
                            return false
                        if (newSample.bloodNumber.length > 10 || newSample.operatorNumber.length > 20){
                            console.log('bloodNumber太长')
                            return false
                        }
                        return true
                    },

                    //点击签收血液样本
                    receiveSample: function (index, row) {
                        //选中的样本
                        this.receiveForm = this.sampleInformation[index]
                        //显示弹出框
                        this.signVisible = true
                    },

                    //签收样本：点击确定按钮
                    confirmReceive(){
                        if (this.currentChanged) {
                            this.current = 1
                            this.currentChanged = false
                        }
                        axios({
                            url: '/bloodSample/normal/receiveSample',
                            method: 'post',
                            data: this.receiveForm
                        }).then(res => {
                            if (res.data.code == '200') {
                                if(this.sampleInformation.length == 1)
                                    this.current = 1
                                if(res.data.pages < this.current)
                                    this.current = res.data.pages
                                this.handleCurrentChange(this.current)
                                this.signVisible = false
                                this.$notify({
                                    tile: '成功',
                                    message: '签收成功',
                                    type: 'success'
                                })
                            } else {
                                this.$notify({
                                    tile: '警告',
                                    message: '签收出错',
                                    type: 'warning'
                                })
                            }
                        }).catch(err => {
                            this.$notify.error({
                                title: '错误',
                                message: '签收失败',
                            })
                        })
                    },

                    //出库样本
                    outSample(index, row) {
                        let sample_select = this.sampleInformation[index];
                        if (this.currentChanged) {
                            this.current = 1
                            this.currentChanged = false
                        }

                        this.$confirm("此操作将出库该样本, 是否继续?", "提示", {
                            confirmButtonText: "确定",
                            cancelButtonText: "取消",
                            type: "warning",
                        })
                            .then(async () => {
                                axios({
                                    url: '/bloodSample/normal/outSample',
                                    method: 'post',
                                    data: sample_select
                                }).then(res => {
                                    if (res.data.code == '200') {
                                        if(this.sampleInformation.length == 1)
                                            this.current = 1
                                        this.handleCurrentChange(this.current)
                                        this.$notify({
                                            title: '成功',
                                            message: '出库成功',
                                            type: 'success'
                                        })
                                    } else {
                                        this.$notify({
                                            tile: '警告',
                                            message: '出库出错',
                                            type: 'warning'
                                        })
                                    }
                                }).catch(err => {
                                    this.$notify.error({
                                        title: '错误',
                                        message: '出库失败',
                                    })
                                })
                            })
                            .catch(() => {
                                this.$message({
                                    type: "info",
                                    message: "已取消出库",
                                });
                            });
                    },

                    //遗弃样本
                    discardSample(index, row) {
                        let sample_select = this.sampleInformation[index];
                        if (this.currentChanged) {
                            this.current = 1
                            this.currentChanged = false
                        }
                        this.$confirm("此操作将永久删除该条数据, 是否继续?", "提示", {
                            confirmButtonText: "确定",
                            cancelButtonText: "取消",
                            type: "warning",
                        }).then(async () => {
                            axios({
                                url: '/bloodSample/normal/discardSample',
                                method: 'post',
                                data: sample_select
                            }).then(res => {
                                //需要再次进行查询，同时处理当前页无数据的情况
                                if (res.data.code == '200') {
                                    console.log('current:' + this.current + ' length:' + this.sampleInformation.length)
                                    if (this.sampleInformation.length == 1)
                                        this.current = 1
                                    this.handleCurrentChange(this.current)
                                    this.$notify({
                                        title: '成功',
                                        message: '遗弃成功',
                                        type: 'success'
                                    })
                                } else {
                                    this.$notify({
                                        tile: '警告',
                                        message: '遗弃出错',
                                        type: 'warning'
                                    })
                                }
                            }).catch(err => {
                                this.$notify.error({
                                    title: '错误',
                                    message: '遗弃失败',
                                })
                            })
                        })
                    },

                    //登记：点击取消按钮
                    cancel() {
                        this.addForm.bloodNumber = ''
                        this.addForm.state = ''
                        this.addForm.location = ''
                        this.addForm.operator = ''
                        this.addForm.operatorNumber = ''
                        this.dialogVisible = false
                    },

                    //签收：点击取消按钮
                    cancelReceive(){
                        this.signVisible = false
                        this.receiveForm = {}
                    },

                    //导出excel
                    exportExcel () {
                        //血样样本ID
                        let number = this.searchSampleInformation.number
                        //样本状态
                        let state = this.searchSampleInformation.state
                        //操作员
                        let operator = this.searchSampleInformation.operator
                        //日期范围
                        let dateVal = this.searchSampleInformation.dateVal
                        //日期格式转换
                        for (let i = 0; i < dateVal.length; i++) {
                            if(dateVal[i] instanceof Date)
                                dateVal[i] = dateVal[i].format("yyyy-MM-dd")
                        }
                        let startTime = dateVal[0] != null ? dateVal[0] : ''
                        let endTime = dateVal[1] != null ? dateVal[1] : ''
                        //创建a标签元素
                        const a = document.createElement('a')
                        a.href = 'http://localhost:8080/bloodSample/normal/downloadExcel?' + 'number=' + number + '&state=' + state + '&operator=' + operator + '&startTime=' + startTime + '&endTime=' + endTime
                        console.log(a.href)
                        a.click()
                    }
                },

                mounted() {
                    // this.fetchPageData(this.current, this.limit)
                    this.searchSample()
                    this.getBloodSampleState()
                    this.getLocation()
                    //获取员工数据
                    this.user = sessionStorage.getItem("user") ? JSON.parse(sessionStorage.getItem("user")) : {};
                    this.addForm.operator = this.user.username
                    this.addForm.operatorNumber = this.user.jobnum
                }
            });


        })()
    </script>

</body>

</html>